<template>
  <div>
    
    <div class="box">
      <div class="error" v-show="showError">
       密码错误！！！！
      </div>
      <h1>UNI-ADMIN</h1>
      <input type="text" placeholder="请输入用户名" v-model="val1" />
      <input type="password" placeholder="请输入密码" v-model="val2" />
      <button @click="clk">立即登录</button>
    </div>
  </div>
</template>
<script>
export default {
  
  data() {
    return {
      val1: "",
      val2: "",
      list: [],
      showError:false,
      bool:true
    };
  },
  methods: {

    clk() {
      if(this.bool==true){
          this.bool = false;
     
      this.axios
        .post("http://ceshi5.dishait.cn/admin/login", {  
          username: this.val1,
          password: this.val2,
        })
        .then((res) => {
          console.log(res);
          this.bool = true;
          if (res.data.msg == "ok") {
            console.log('in');
            sessionStorage.userInfo = JSON.stringify(res.data.data);
            sessionStorage.token = res.data.data.token;
           this.$router.push('/Index')
          }
          // if(res.data.msg=='密码错误'){
          //   this.showError=true;
          //   setTimeout(()=>{
          //     this.showError=false
          //   },2000)
          // }
        });

         }
    },
  },
};
</script>
<style scoped>
.box {
  margin: 100px auto;
  width: 500px;
  height: 300px;
  border: 1px solid #ccc;
  border-radius: 10px;
  text-align: center;
}
h1 {
  width: 100%;
  height: 60px;
  line-height: 60px;
  text-align: center;
  font-size: 30px;
  color: #ccc;
  border-bottom: 1px solid #ccc;
}
input {
  width: 450px;
  height: 30px;
  margin: 20px auto;
  padding-left: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
button {
  width: 450px;
  height: 30px;
  color: #fff;
  background: rgb(23, 109, 109);
  border: 0px solid rgb(100, 100, 100);
  border-radius: 5px;
  margin-top: 30px;
}
.error{
  width: 500px;
  height: 40px;
  line-height: 40px;
  border: 1px solid rgb(231, 113, 113);
  color: red;
  background: rgb(248, 175, 175);

}
</style>